<template>
  <a-upload
    name="file"
    :data="uploadData"
    :headers="myHeader"
    :action="action"
    :showUploadList="false"
    :beforeUpload="beforeUpload"
    @change="handleChange"
  >
    <slot name="content">
      <a-button :disabled="uploadButtonLoading">
        <a-icon type="upload" />
        {{buttonText}}
      </a-button>
    </slot>
  </a-upload>
</template>
<script>
import { ACCESS_TOKEN } from "@/config/storageKey";
import { uploadApi } from "@/api/common";
export default {
  props: {
    busiId: {
      //关联主键id
      type: String,
      required: true
    },
    itemType: {
      //业务类型
      type: String,
      required: true
    },
    action: {
      type: String,
      default: uploadApi
    },
    buttonText: {
      type: String,
      default: "上传文件"
    }
  },
  data() {
    return {
      uploadButtonLoading: false,
      myHeader: {},
      uploadData: {
        busiId: this.busiId,
        itemType: this.itemType
      }
    };
  },
  created() {
    this.myHeader[ACCESS_TOKEN] = this.$store.getters.token;
  },
  methods: {
    handleChange(info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        const { file, fileList } = info;
        const { response } = file;
        this.loading = false;
        this.$emit("uploadSuccess", response, file, fileList);
        this.uploadButtonLoading = false;
      }
    },
    beforeUpload(file) {
      this.uploadButtonLoading = true;
    }
  }
};
</script>
